<template>
    <div class="page">
        <div class="header">
            <router-link to="/my-income" class="header-btnLeft"  ><img src="../assets/back-btn.png"></router-link>
            <h1 class="header-title">提现记录</h1>
            <div class="header-btnRight"></div>
        </div>
        <div class="h30"></div>
        <div class="list">
            <div class="list-item" v-for="item in recordArr">
                <div class="list-item-head">
                    <div class="list-item-head-title">提现：</div>
                    <div class="list-item-head-price">-{{item.money}}元</div>
                </div>
                <div class="list-item-price">{{item.money}}元</div>
                <div class="list-item-date">提现时间：{{item.time}}
                    <span class="fl" v-if="item.state==1">提现申请中</span>
                    <span class="fl"  v-else-if="item.state==2">提现成功</span>
                    <span class="fl"  v-else-if="item.state==3">已拒绝提现</span>
                </div>
            </div>
        </div>
        <div class="h120"></div>
    </div>
</template>

<script>
    import wxShare from "../store/wxShare"
    export default {
        name: "My-income-record",
        data(){
            return{
                recordArr:[]
            }
        },

        methods:{
            getData(){
                this.axios.post('record')
                    .then(res => {
                        this.recordArr=res.data;

                    })
                    .catch(err => console.log(err));
            },
            share() {
                wxShare({title: '我的收益-提现记录', debug: false}, function () {
                    console.log('分享成功')
                });
            }
        },
        mounted(){
            this.getData();
            this.share();
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";
    .h30{height: rpx(30);}
    .h120{height: rpx(120);}
    .page{
        background: $bgcolor1;
        min-height: 100%;
    }
    .header{
        display: flex;
        align-items: center;
        padding: rpx(10) rpx(30);
        justify-content: space-between;
        background:$color0;
        &-btnLeft{
            width: rpx(64);
            height: rpx(64);
            padding-top: rpx(16);
            img{
                width: rpx(32);
                height: rpx(32);
            }
        }
        &-btnRight:after{
            display: block;
            content: ' ';
            width: rpx(64);
            height: rpx(64);
        }
        &-title{
            flex: 1;
            font-size: rpx(36);
            text-align: center;
            font-weight: normal;
        }
    }



    //项列表
    .list{
        &-item{
            padding: rpx(30);
            background: $color0;
            border-bottom: solid 1px $color2;
            &-head{
                display: flex;
                align-items: center;
                justify-content: space-between;
                &-title{
                    flex: 1;
                    font-size: rpx(30);
                }
                &-price{
                    font-size: rpx(36);
                    color: $color3;
                }
            }
            &-price{
                padding: rpx(20) 0;
                font-size: rpx(60)
            }
            &-date{
                font-size: rpx(24);
                color: $color5;
                .fl{
                    float: right;
                }
            }
        }
    }


</style>